<template>
 <div style="width:100%;height:100%;">
    <el-row ><el-col :span="24" >
    <el-menu theme="dark" default-active="1"  mode="horizontal"  :router=true>

        <el-menu-item  index="/">首页</el-menu-item>
         <template v-for="(item,index) in sorts">
            <template v-if="!item.list || item.list.length==0">
                <el-menu-item  v-bind:index=" '/sort/'+item.id+'/'+item.sortname+'/1/10'   ">{{item.sortname}}</el-menu-item>
            </template>
            <template v-else>
                <el-submenu v-bind:index="index.toString()">
                    <template slot="title">{{item.sortname}}</template>
                    <template v-for="(sub,subindex) in item.list">
                        <el-menu-item v-bind:index=" '/sort/'+sub.id+'/'+sub.sortname+'/1/10' " >{{sub.sortname}}</el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </template>

    </el-menu>
    </el-col>
        </el-row>
     <el-row class="container"><el-col :span="24" >
            <router-view></router-view>
    </el-col></el-row>
   </div>
</template>

<script>
    import {sortApi} from './apis/sort.js';


    export default {
        data () {
            return {
                sorts:sortApi.getSorts()
            }
        }
        ,mounted() {
        }
    }
</script>

<style>
    .toolbar {
        height:15%;
    }
    .container {
        text-align: center;
        margin: 0 auto;
        overflow-y: auto;
        overflow-x: hidden;
        height:85%;
    }
</style>